import React from 'react';
import ReactDOM from 'react-dom';
import {Icon, Flex} from 'weaver-mobile';
import base from "../../util/base";

/**
 * 语音播放组件
 */
export default class Main extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            audioTime: '',
            currentTime: '00:00',
            paused : true
        }
        this.audioRef = React.createRef();
    }

    componentDidMount() {
        const audioDOM = ReactDOM.findDOMNode(this.audioRef.current);
        const _this = this;
        window.jQuery(audioDOM).on('loadedmetadata', function () {
            _this.setState({audioTime: _this.transTime(this.duration)});
        }).on('timeupdate',function(){
            _this.setState({currentTime: _this.transTime(this.currentTime)});
        }).on('ended',function () {
            _this.setState({currentTime: '00:00',paused:true});
            const {variableMap} = base.allStores.wfSignInputStore;
            variableMap.delete('currentAudioDOM');
        }).on('pause',function () {
            _this.setState({paused:true});
        }).on('play',function () {
            _this.setState({paused:false})
        })
        audioDOM.load();
    }

    render() {
        const {datasrc} = this.props;
        const {audioTime,paused = true,currentTime = '00:00'} = this.state;
        return (
            <div className={'wf-voice-playback'}>
                <Flex className={'wf-audio-controll'} onClick={() => this.audioPlay()}>
                    <div className={'wf-audio-play'}>
                        <Icon type={paused ? 'play' : 'suspend'}/>
                    </div>
                    <div className={'wf-audio-img'}>
                        {paused ?
                            <Icon type={'audio-frequency'}/>
                            :
                            <img src="/images/ecology9/workflow/voice-play.gif"/>
                        }
                    </div>
                    <div className={'wf-audio-time'}>{`${currentTime}/${audioTime}`}</div>
                </Flex>
                <audio ref={this.audioRef} preload="none" hidden="true">
                    <source src={datasrc}/>
                </audio>
            </div>
        )
    }

    transTime(time) {
        var duration = parseInt(time);
        var minute = parseInt(duration / 60);
        var sec = duration % 60 + '';
        var isM0 = ':';
        if (minute == 0) {
            minute = '00';
        } else if (minute < 10) {
            minute = '0' + minute;
        }
        if (sec.length == 1) {
            sec = '0' + sec;
        }
        return minute + isM0 + sec
    }

    //播放  暂停
   audioPlay(){
        let audioKey = 'currentAudioDOM';
        const audioDOM = ReactDOM.findDOMNode(this.audioRef.current);
        const {variableMap,controlVariableMap} = base.allStores.wfSignInputStore;
        if(audioDOM.paused) {
            if(variableMap.has(audioKey)){
                let currentAudioDOM = variableMap.get(audioKey);
                if(currentAudioDOM){
                    currentAudioDOM.pause();
                }
            }
            controlVariableMap(audioKey,audioDOM);
            audioDOM.play();
        } else {
            audioDOM.pause();
            variableMap.delete(audioKey);
        }
    }
}